<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>润滑油编辑</h5>
                    </div>
                    <div class="ibox-content">
                        <form id='oil-form' method="post" class="form-horizontal" enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" v-model='car_oil.name' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">外部链接</label>
                                <div class="col-sm-10">
                                    <input type="text" name="link" v-model='car_oil.link' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">图片</label>
                                <div class="col-sm-10">
                                    <img src="" v-bind:src='car_oil.img_url' alt="" />
                                    <input id='oil_img' name="oil_img" type="file" />
                                    <!--<a v-on:click="uploadImg()" class="btn btn-primary ">-->
                                        <!--上传-->
                                    <!--</a>-->
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a class="btn btn-primary" v-on:click="oil_edit()" >保存内容</a>
                                    <!--<button class="btn btn-white" type="submit">取消</button>-->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../config'
    export default{
        name : 'oil_edit',
        id : 0,
        data () {
            return {
                car_oil:{
                    'id':'',
                    'name':'',
                    'img_url':''
                    ,'link':''
                },
                selected_oil_id:0,
                oils:[],
                getOil : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/oil/' + this.id + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){
                            if( json.status == undefined || json.status == 0 ) {
                                t.car_oil = $.extend(t.car_oil,json);
                                t.car_oil.img_url = config.api_url + '/frontend/images/' + t.car_oil.img_url;
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });

                }
                ,oil_edit : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/oil/' + this.id + '/edit' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
//                        data: t.car_oil,
                        data: new FormData($('#oil-form')[0]),
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ) {
                                alert('保存成功');
                                location.href = '#/oil';
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
            }
        }
        ,created: function(){
            this.id = this.$route.params.id;
            this.getOil();
        }

    }
</script>

